<template>
	<view class="pageView">
		<u-navbar
			title="在线客服"
			:autoBack="true"
		>
		</u-navbar>
		<scroll-view style="width: 686rpx;height: 75vh;padding: 32rpx;margin-top: 174rpx;" scroll-y="true">
			<view class="dateTime">2024-09-05 04:33</view>
			<view class="huakuang" v-for="(item, index) in huaList" :key="index">
				<view :class="{
					'positionLeft': !item.type,
					'positionRight': item.type
				}">
					<view v-if="!item.type" class="avater"></view>
					<view class="huaBlockBlock">
						<view v-if="item.type" class="itemType">{{ item.type }}</view>
						<view class="huaBlock">{{ item.hua }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="pageBotttom">
			<u-input
				type="text"
				v-model="inputVal"
				placeholder="输入内容开始聊天"
				style="padding: 26rpx 32rpx;"
				:adjustPosition="false"
				shape="circle"
			>
				<template slot="suffix">
					<u-icon name="photo" size="22" color="#999999"></u-icon>
				</template>
			</u-input>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				huaList: [
					{
						hua: '客服，您好！',
						type: '已读'
					},
					{
						hua: '您好，有什么可以帮您？'
					}
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	.pageView{
		height: 100vh;
		background: #f4f4f4;
		.dateTime{
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: normal;
			font-size: 24rpx;
			color: #999999;
			text-align: center;
		}
		.positionLeft{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding-top: 40rpx;
			.avater{
				width: 80rpx;
				height: 80rpx;
				border-radius: 74rpx 74rpx 74rpx 74rpx;
				background: #000;
			}
			.huaBlock{
				margin-left: 24rpx;
				padding: 30rpx;
				border-radius: 0rpx 40rpx 40rpx 40rpx;
				background: #fff;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 30rpx;
				color: #333333;
			}
		}
		.positionRight{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-top: 40rpx;
			.huaBlockBlock{
				display: flex;
				align-items: flex-end;
				.itemType{
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 24rpx;
					color: #B2B2B2;
				}
				.huaBlock{
					margin-left: 16rpx;
					padding: 30rpx;
					background: #0165FB;
					border-radius: 40rpx 40rpx 0rpx 40rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 30rpx;
					color: #FFFFFF;
				}
			}
		}
		.pageBotttom{
			padding: 22rpx;
			background: #fff;
		}
	}
</style>